<html>
	<head>
		<title>Background Animation</title>
		<style>
			.wobble {
  				-webkit-animation-name: wobble;
				-webkit-animation-duration: 5s;
				-webkit-animation-iteration-count: 10;
				
				position: absolute;
			}
			
			@-webkit-keyframes wobble {
      			0% {
        			left: 100px;
					color: red;
					font-size: 1em;
      			}
				20% {
        			left: 50px;
					color: purple;
					font-size: 5em;
      			}
      			40% {
        			left: 150px;
					color: green;
					font-size: 2em;
      			}

      			60% {
        			left: 75px;
					color: blue;
					font-size: .5em;
      			}
				
				80% {
        			left: 175px;
					color: tan;
					font-size: 1.5em;
      			}
      			100% {
        			left: 100px;
					color: orange;
					font-size: 1em;
      			}
    		}
			
			
			
			    @-webkit-keyframes bounce {

 

      from {

        -webkit-transform: translateY(100px);

        -webkit-animation-timing-function: ease-out;

      }

 

      25% {

        -webkit-transform: translateY(50px);

        -webkit-animation-timing-function: ease-in;

      }

 

      50% {

        -webkit-transform: translateY(100px);

        -webkit-animation-timing-function: ease-out;

      }

 

      75% {

        -webkit-transform: translateY(75px);

        -webkit-animation-timing-function: ease-in;

      }

 

      to {

        -webkit-transform: translateY(100px);
		-webkit-transform: translateX(100px);

      }

 

    }
			
			
			
		</style>
	</head>
	<body>
		
		<div id="foobar" class="wobble">
			
			lorem ipsum
		</div>
		
		
	</body>
</html>